<template>
    <view class="page">
        <u-navbar class="gradient-bg" title="服务管理" navbarType="2" @leftClick='leftClick' fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        <z-paging ref="paging" v-model="dataList" @query="getList">
            <template #top>
                <!-- <z-tabs class="service-tab" :current="tabIndex" :style="'top:'+ (titletop+titleheight)+'px'"
                    :list="stateList" active-color="#2e996f" @change="tabChange" /> -->
                <view class="top">1</view>
                <view class="service-tab">
                    <view class="box">
                        <view class="tab" v-for="item,index in stateList" :key="index" :class="{'action':(TabShow==index)}" @click="onServiceTab(index, item.id)">
                            <text>{{item.name}}</text>
                            <text class="line"></text>
                        </view>
                        <view class="tab" style="color:#2e996f;font-size: 26rpx;" @click="goPage()">
                            <view style="display: flex;align-items: center;">
                                <u-icon name="plus-circle-fill" color="#2e996f" size="14"></u-icon>新增服务
                            </view>
                        </view>
                        <!-- <view class="cut" @click="isList = !isList">
                            <u-icon :name="isList ? 'list-dot' : 'grid'" color="#2e996f" size="24"></u-icon>
                        </view> -->
                    </view>
                </view>
            </template>
            <!-- 服务列表  @click="onGoodsList(item)" -->
            <view class="goods-data">
                <view class="goods-list">
                    <view :class="isList?'list-view' : 'list-li'" v-for="(item,index) in dataList" :key="index">
                        <view class="thumb">
                            <image :src="item.cover_pict" mode="scaleToFill"></image>
                        </view>
                        <view class="item">
                            <view class="commodity-detail">
                                <view class="title">
                                    <text class="one-omit">{{item.name}}</text>
                                </view>
                                <view class="title1" @click="navigateToParams('/pagesB/service/set-ratio?data=',item)">
                                    <!-- <text class="commodity-count">时长{{item.service_duration}}分钟</text> -->
                                    <text class="rate" style="font-size:30rpx;color: #999;">设置抽成比例</text>
                                </view>
                            </view>
                            <!--  <text class="commodity-disc">{{item.disc}}</text> -->
                            <!-- <image src="../../static/mine/shangjia.png" mode="widthFix"></image> v-if="item.status == 0"-->
                            <view class="commodity-detail">
                                <text class="commodity-price">￥{{item.min_current_price}}</text>
                                <view style="display: flex; align-items:center;">
                                    <view @click="shelfService(item)" style="font-size:20;margin-right: 20rpx;">
                                        <text v-if="item.status == 1" style="color:#2e996f;">上架</text>
                                        <text v-if="item.status == 0" style="color: #999;">下架</text>
                                    </view>
                                    <view @click="editService(item)">
                                        <u-icon name="edit-pen" color="#2e996f" size="28"></u-icon>
                                    </view>
                                    <!-- <view @click="shelfService(item)">
                                        <u-icon v-if="item.status == 1" name="shopping-cart" color="#2e996f" size="24"></u-icon>
                                        <u-icon name="download" color="#2e996f" size="24"></u-icon>
                                    </view> -->
                                    <view @click="deleteService(item)">
                                        <u-icon name="trash" size="22"></u-icon>
                                    </view>
                                </view>
                            </view>
                            <!-- <view class="price">
                                <view class="retail-price">
                                    <text class="min">￥</text>
                                    <text class="max">{{item.price}}</text>
                                    <view class="tag" v-if="item.is_goods === 1">
                                        <text>抢购价</text>
                                    </view>
                                </view>
                                <view class="vip-price">
                                    <text class="min">￥</text>
                                    <text class="max">{{item.vip_price}}</text>
                                </view>
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="service-list">
                <view class="list" v-for="(service, index) in dataList" :key="index">
                    
                </view>
            </view> -->
        </z-paging>
        <DialogBox ref="DialogBox"></DialogBox>
    </view>
</template>

<script>
import {
    getServicesLists,
    setServiceStatus,
    delServiceInfo
} from "@/api/service.js"
export default {
    data() {
        return {
            TabShow: 0,
            tabIndex: 0,
            queryParams: {
                page: 1,
                limit: 20,
                type: 0,
            },
            stateList: [{
                name: '已上架',
                id: 0
            }, {
                name: '已下架',
                id: 1
            }], //状态  0:已上架 1:下架 
            dataList: [],
            // 列表视图切换
            isList: false,
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
        }
    },
    onLoad() {
        // #ifdef MP-WEIXIN
        getApp().getHeight();
        this.titleheight = getApp().titleheight;
        this.titletop = getApp().titletop;
        // #endif
    },
    onShow() { },
    methods: {
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        leftClick() {
            uni.switchTab({
                url: "/pages/mine/index"
            })
        },
        onServiceTab(type, id) {
            this.TabShow = type;
            console.log(this.TabShow, '++')
            this.queryParams.type = id;
            // this.getList();
            this.$refs.paging.reload();
        },
        tabChange(index) {
            this.tabIndex = index;
            // this.cateId = this.tabList[index].id
            // //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
            this.queryParams.type = this.stateList[index].id;
            this.$refs.paging.reload();
        },
        getList(page) {
            this.queryParams.page = page
            getServicesLists(this.queryParams).then(res => {
                this.$refs.paging.complete(res.data.lists);
            }).catch(err => {
                this.$refs.paging.complete(false);
            })
        },
        goPage() {
            uni.navigateTo({
                url: '/pagesB/addService/addService'
            })
        },
        editService(row) {
            uni.navigateTo({
                url: "/pagesB/addService/addService?data=" + encodeURIComponent(JSON.stringify(row))
            })
        },
        navigateToParams(url, row) {
            uni.navigateTo({
                url: url + encodeURIComponent(JSON.stringify(row))
            })
        },
        shelfService(item) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否确定要更改该服务的状态?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setServiceStatus({
                    service_code: item.code
                }).then(res => {
                    if (res.code == 1) {
                        this.$message(res.info)
                        this.$refs.paging.reload();

                    }
                })
            })
        },
        deleteService(item) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否确定要删除该服务?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                delServiceInfo({
                    service_code: item.code
                }).then(res => {
                    if (res.code == 1) {
                        this.$message(res.info)
                        this.$refs.paging.reload();

                    }
                })
            })
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

/* 订单tab */
// .service-tab {
//     position: fixed;
//     left: 0;
//     top: 100rpx;
//     /* #ifdef APP-PLUS || MP-WEIXIN */
//     top: calc(88rpx + var(--status-bar-height));
//     /* #endif */
//     /* #ifdef H5 */
//     // top: 88rpx;
//     /* #endif */
//     z-index: 999;
//     width: 100%;

//     /deep/.z-tabs-conatiner {
//         height: 100rpx;
//         padding-top: 30rpx;
//     }
// }

/deep/.zp-custom-refresher-view {
  //   z-index: 99999999;
  margin-top: calc(135rpx + var(--status-bar-height)) !important;
}

/deep/.uni-popup__wrapper {
  border-radius: 15rpx;
  overflow: hidden;
}

.top {
  position: fixed;
  left: 0;
  /* #ifdef APP-PLUS || MP-WEIXIN */
  top: calc(74rpx + var(--status-bar-height));
  /* #endif */
  height: 10rpx;
  width: 100%;
  background-color: #ffffff;
  color: #fff;
  z-index: 999;
}

/* 服务tab */
.service-tab {
  position: fixed;
  left: 0;
  top: 100rpx;
  /* #ifdef APP-PLUS || MP-WEIXIN */
  top: calc(88rpx + var(--status-bar-height));
  /* #endif */
  /* #ifdef H5 */
  // top: 88rpx;
  /* #endif */
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100%;
  height: 120rpx;
  background-color: #ffffff;

  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;

    // border-bottom: 1px solid #bfbfbf;
    .tab0 {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 63%;
      height: 100%;

      text {
        font-size: 26rpx;
        color: #555555;
      }
    }

    .tab {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 33%;
      height: 100%;

      text {
        font-size: 26rpx;
        color: #555555;
      }
    }

    .action {
      text {
        color: #2e996f;
      }

      .line {
        position: absolute;
        left: 50%;
        bottom: 10rpx;
        width: 30%;
        height: 6rpx;
        //   background: linear-gradient(to right, $base, #f6f6f6);
        background-color: #2e996f;
        transform: translate(-50%, 0);
      }
    }
  }

  // .coupon-list {
  //   padding: 20rpx 4%;
  //   margin: 250rpx auto 0;
  //   // min-height: 400rpx;
  //   background-color: #ffffff;
  // }
}

/* 商品列表 */

.goods-data {
  width: 100%;
  margin-top: 20rpx;
  // background: #efefef;
  // margin-top: 120rpx;
  // /* #ifdef APP-PLUS */
  // margin-top: 170rpx;
  // /* #endif */
  // /* #ifdef MP */
  // margin-top: calc(220rpx + var(--status-bar-height));

  /* #endif */
  .goods-list {
    padding: 0 25rpx;
    border-radius: 20rpx;
    overflow: hidden;

    .list-view {
      float: left;
      width: 49%;
      // padding-bottom: 30rpx;
      // height: 560rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      margin-right: 2%;
      margin-bottom: 30rpx;
      overflow: hidden;
      height: 500rpx;

      .thumb {
        padding-top: 20rpx;
        width: 100%;
        height: 62%;
        overflow: hidden;

        image {
          height: 350rpx;
        }
      }

      .item {
        width: 100%;

        .title {
          padding: 20rpx 0;

          text {
            width: 100%;
            color: #212121;
            font-size: 26rpx;
          }
        }

        .commodity-disc {
          border-radius: 4rpx;
          background: #efefef;
          padding: 5rpx 20rpx;
          font-size: 24rpx;
          color: #7f8699;
          text-align: left;
          margin-left: 15rpx;
          // margin-top: 9rpx;
        }

        .commodity-detail {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 15rpx;
          width: 300rpx;
          // margin-top: 18rpx;style="width: 32rpx;height: 32rpx;"
          image {
            width: 32rpx;
            height: 32rpx;
          }

          .commodity-price {
            color: #ff0000;
            font-size: 28rpx;
          }

          .commodity-count {
            color: #999999;
            font-size: 26rpx;
          }
        }
      }
    }

    .list-view:nth-child(2n) {
      margin-right: 0;
    }

    // 列表
    .list-li {
      display: flex;
      align-items: center;
      width: 100%;
      height: 200rpx;
      background-color: #ffffff;
      border-bottom: 2rpx solid #f6f6f6;
      padding: 30rpx 0;

      .thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
        height: 100%;

        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 10rpx;
        }
      }

      .item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 70%;
        height: 80%;
        margin-bottom: 20rpx;

        .title {
          padding: 0 20rpx 20rpx 0;

          text {
            width: 100%;
            color: #212121;
            font-size: 26rpx;
          }
        }

        .commodity-disc {
          border-radius: 4rpx;
          background: #efefef;
          padding: 5rpx 20rpx;
          font-size: 24rpx;
          color: #7f8699;
          text-align: left;
          margin-left: 15rpx;
          margin-top: 9rpx;
          max-width: 50%;
        }

        .commodity-detail {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 15rpx;
          width: 90%;
          margin-top: 18rpx;
          .title {
            flex: 1;
            padding-bottom: 0;
            .one-omit {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .title1 {
            .rate {
              width: 180rpx;
            }
          }
          image {
            width: 32rpx;
            height: 32rpx;
          }

          .commodity-price {
            color: #ff0000;
            font-size: 28rpx;
          }

          .commodity-count {
            color: #999999;
            font-size: 26rpx;
          }
        }

        .price {
          padding: 0 20rpx;

          .retail-price {
            display: flex;
            align-items: flex-end;
            width: 100%;
            height: 40rpx;

            .min {
              display: inline-block;
              font-size: 24rpx;
              color: $base;
              font-weight: bold;
              transform: scale(0.7);
            }

            .max {
              font-size: 28rpx;
              color: $base;
              font-weight: bold;
            }

            .tag {
              position: relative;
              background-color: $base;
              border-radius: 4rpx;
              margin-left: 10rpx;

              text {
                display: inline-block;
                color: #ffffff;
                font-size: 24rpx;
                transform: scale(0.7);
              }
            }

            .tag:before {
              position: absolute;
              left: -6rpx;
              top: 0;
              content: "";
              width: 0;
              height: 0;
              border-top: 0rpx solid transparent;
              border-right: 10rpx solid $base;
              border-bottom: 6rpx solid transparent;
            }
          }

          .vip-price {
            display: flex;
            align-items: flex-end;
            width: 100%;
            height: 40rpx;

            .min {
              display: inline-block;
              font-size: 24rpx;
              color: #212121;
            }

            .max {
              font-size: 24rpx;
              color: #212121;
            }
          }
        }
      }
    }
  }
}
</style>